<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="team02.server.model.MySQLModel"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="js/jquery.min.js"></script>
<script src="js/highcharts.js"></script>

<title>Insert title here</title>
<script type="text/javascript">
	
</script>

<link rel="stylesheet" type="text/css" href="css/template.css">
<style type="text/css">
.graph {
	width: 600px;
	height: 300px;
	float: left;
	margin: 10px;
	position: relative;
	border: 1px solid #999;
	border-radius: 5px;
	-webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px
		rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px
		rgba(0, 0, 0, 0.3);
}

.comment {
	position: relative;
	float: left;
	width: 240px;
	margin: 10px;
	padding: 5px;
	background-color: orange;
	border-radius: 5px;
	-webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px
		rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px
		rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
	<%
		Connection conn = null;
		float count_score = 0;
		float count_100 = 0, count_95 = 0, count_90 = 0, count_85 = 0;
		float count_80 = 0, count_75 = 0, count_70 = 0;
		float count_65 = 0, count_60 = 0, count_55 = 0;
		float count_50 = 0, count_45 = 0, count_40 = 0;
		float count_30 = 0, count_20 = 0, count_10 = 0, count_0 = 0;
		float statistics_a = 0, statistics_b = 0, statistics_c = 0, statistics_d = 0, statistics_f = 0;

		String title = null, subtitle = null;
		try {
			String userName = "team02";
			String password = "team02";
			String url = "jdbc:mysql://127.0.0.1:3306/jp_autotest";
			Class.forName("com.mysql.jdbc.Driver").newInstance();

			conn = DriverManager.getConnection(url, userName, password);
			System.out.println("Da ket noi CSDL");

			String test_id = request.getParameter("test_id");

			String query = "SELECT score from jp_examinee where test_id = '"
					+ test_id + "'";
			String query2 = "SELECT title, subtitle from jp_test where id = '"
					+ test_id + "'";
			System.out.println(query);
			Statement st = conn.createStatement();
			ResultSet rs = st.executeQuery(query);

			Statement st2 = conn.createStatement();
			ResultSet rs2 = st2.executeQuery(query2);
			while (rs2.next()) {
				title = rs2.getString(1);
				subtitle = rs2.getString(2);

			}

			while (rs.next()) {
				count_score++;
				if (rs.getString(1).equals("100"))
					count_100++;
				if (rs.getString(1).equals("95"))
					count_95++;
				if (rs.getString(1).equals("90"))
					count_90++;
				if (rs.getString(1).equals("85"))
					count_85++;
				if (rs.getString(1).equals("80"))
					count_80++;
				if (rs.getString(1).equals("75"))
					count_75++;
				if (rs.getString(1).equals("70"))
					count_70++;
				if (rs.getString(1).equals("65"))
					count_65++;
				if (rs.getString(1).equals("60"))
					count_60++;
				if (rs.getString(1).equals("55"))
					count_55++;
				if (rs.getString(1).equals("50"))
					count_50++;
				if (rs.getString(1).equals("45"))
					count_45++;
				if (rs.getString(1).equals("40"))
					count_40++;
				if (rs.getString(1).equals("30"))
					count_30++;
				if (rs.getString(1).equals("20"))
					count_20++;
				if (rs.getString(1).equals("10"))
					count_10++;
				if (rs.getString(1).equals("0"))
					count_0++;

			}
			conn.close();
			statistics_a = count_100 + count_95 + count_90 + count_85;
			statistics_b = count_80 + count_75 + count_70;
			statistics_c = count_65 + count_60 + count_55;
			statistics_d = count_50 + count_45 + count_40;
			statistics_f = count_score - statistics_a - statistics_b
					- statistics_c - statistics_d;
		} catch (Exception e) {
			out.println("Error xxxxxxxxxxxxxxxxxx : " + e);
		}
		float p100 = count_100/count_score*100;
		p100 = Math.round(p100*100)/100f;
		
		float p95 = count_95/count_score*100;
		p95 = Math.round(p95*100)/100f;		
		
		float p90 = (float)((count_90/count_score)*100);		
		p90 = Math.round(p90*100)/100f;
		
		float p85 = count_85/count_score*100;
		p85 = Math.round(p85*100)/100f;
		
		float p80 = count_80/count_score*100;
		p80 = Math.round(p80*100)/100f;
		
		float p75 = count_75/count_score*100;
		p75 = Math.round(p75*100)/100f;
		
		float p70 = count_70/count_score*100;
		p70 = Math.round(p70*100)/100f;
		
		float p65 = count_65/count_score*100;
		p65 = Math.round(p65*100)/100f;
		
		float p60 = count_60/count_score*100;
		p60 = Math.round(p60*100)/100f;
		
		float p55 = count_55/count_score*100;
		p55 = Math.round(p55*100)/100f;
		
		float p50 = count_50/count_score*100;
		p50 = Math.round(p50*100)/100f;
		
		float p45 = count_45/count_score*100;
		p45 = Math.round(p45*100)/100f;
		
		float p40 = count_40/count_score*100;
		p40 = Math.round(p40*100)/100f;
		
		float p30 = count_30/count_score*100;
		p30 = Math.round(p30*100)/100f;
		
		float p20 = count_20/count_score*100;
		p20 = Math.round(p20*100)/100f;
		
		float p10 = count_10/count_score*100;
		p10 = Math.round(p10*100)/100f;
		
		float p0 = count_0/count_score*100;
		p0 = Math.round(p0*100)/100f;
		
		
	%>

	<script type="text/javascript">
	$(function() {
	
		var title = "<%=title%>";
		var subtitle = "<%=subtitle%>";
			var colors = Highcharts.getOptions().colors, categories = [ 'A',
					'B', 'C', 'D', 'F' ], name = 'ブラウザブランド', data = [ {
				y : <%=p85%>+ <%=p90%>+ <%=p95%> + <%=p100%>,
				color : colors[0],
				drilldown : {
					name : '統計A',
					categories : [ '8.5', '9.0', '9.5', '10.0' ],
					data : [ <%=p85%>, <%=p90%>, <%=p95%>, <%=p100%> ],
					color : colors[0]
				}
			}, {
				y : <%=p70%>+ <%=p75%>+ <%=p80%>,
				color : colors[1],
				drilldown : {
					name : '統計B',
					categories : [ '7.0', '7.5', '8.0' ],
					data : [ <%=p70%>, <%=p75%>, <%=p80%> ],
					color : colors[1]
				}
			}, {
				y : <%=p55%>+ <%=p60%>+ <%=p65%>,
				color : colors[2],
				drilldown : {
					name : '統計C',
					categories : [ '5.5', '6.0', '6.5' ],
					data : [ <%=p55%>, <%=p60%>, <%=p65%> ],
					color : colors[2]
				}
			}, {
				y : <%=p40%>+ <%=p45%>+ <%=p50%>,
				color : colors[3],
				drilldown : {
					name : '統計D',
					categories : [ '4.0', '4.5', '5.0' ],
					data : [ <%=p40%>, <%=p45%>, <%=p50%> ],
					color : colors[3]
				}
			}, {
				y : <%=p0%>+<%=p10%>+ <%=p20%>+ <%=p30%>,
				color : colors[4],
				drilldown : {
					name : '統計F',
					categories : [ '0', '1', '2', '3' ],
					data : [ <%=p0%>, <%=p10%>, <%=p20%>, <%=p30%> ],
					color : colors[4]
				}
			} ];

			function setChart(name, categories, data, color) {
				chart.xAxis[0].setCategories(categories, false);
				chart.series[0].remove(false);
				chart.addSeries({
					name : name,
					data : data,
					color : color || 'white'
				}, false);
				chart.redraw();
			}

			var chart = $('#container')
					.highcharts(
							{
								chart : {
									type : 'column',
									renderTo : 'container',
								},
								title : {
									text : title
								},
								subtitle : {
									text :  subtitle
										},
								xAxis : {
									categories : categories
								},
								yAxis : {
									title : {
										text : 'マークの割合'
									}
								},
								plotOptions : {
									column : {
										cursor : 'pointer',
										point : {
											events : {
												click : function() {
													var drilldown = this.drilldown;
													if (drilldown) { // drill down
														setChart(
																drilldown.name,
																drilldown.categories,
																drilldown.data,
																drilldown.color);
													} else { // restore
														setChart(name,
																categories,
																data);
													}
												}
											}
										},
										dataLabels : {
											enabled : true,
											color : colors[0],
											style : {
												fontWeight : 'bold'
											},
											formatter : function() {
												return this.y + '%';
											}
										}
									}
								},
								tooltip : {
									formatter : function() {
										var point = this.point, s = this.x
												+ ':<b>' + this.y
												+ '% </b><br/>';
										if (point.drilldown) {
											s += 'クリックして表示 ' + point.category
													+ ' バージョン';
										} else {
											s += 'ブラウザブランドに戻る。';
										}
										return s;
									}
								},
								series : [ {
									name : name,
									data : data,
									color : 'white'
								} ],
								exporting : {
									enabled : false
								}
							}).highcharts(); // return chart
			});
	</script>

	<br>
	<div class="header"></div>
	<div class="menu">
		<p class="menu_label"></p>
		<p class="menu_item">
			<a href="#">ホームページ</a> <a href="staticpages/customers.html">顧客</a> <a
				href="staticpages/contactus.html">連絡</a>
		</p>
	</div>

	<div class="container" style="height: 320px;">
		<div class="comment">
			回答者の点の統計表 <br /> A ランク:
			<%=statistics_a%><br /> B ランク:
			<%=statistics_b%><br /> C ランク:
			<%=statistics_c%><br /> D ランク:
			<%=statistics_d%><br /> F ランク:
			<%=statistics_f%>
		</div>
		<div id="container" class="graph"></div>
	</div>
	<div class="footer"></div>
</body>
</html>